<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <div class="head-div">
        </div>
      </div>
    </div>
    <!-- 注册之后跳转found页，填写简历 -->
    <div class="content">
      <div class="logo">
        <img src="../../assets/zjt2.png" alt="" class="back" @click="back()" />
        <img src="../../assets/bg.png" alt="" class="logo-bg" />
      </div>
      <!-- 公司忘记密码 -->
      <div class="content">
        <p>忘记密码</p>
        <div class="head-title">
          <input type="text" placeholder="请输入手机号" />
          <span>获取验证码</span>
        </div>
        <div class="head-title">
          <input type="text" placeholder="请填写验证码" />
        </div>
        <div class="head-title">
          <input type="text" placeholder="请输入新密码(最少6位，数字或字母)" />
        </div>
        <div class="head-btn">登录</div>
        <div class="bottom">
          <span @click="on(1)">快捷登录</span>
          <span>|</span>
          <span @click="on(0)">密码登录</span>
        </div>
      </div>
    </div>
    <img src="../../assets/login.jpg" alt="" class="bg" />
  </div>
</template>

<script>
  import {
    Toast
  } from 'mint-ui';
  export default {
    inject: ["reload"],
    name: "companyForget",
    created() {
      // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
    },
    mounted() {
      // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
    },
    // data() 为变量赋值等
    data() {
      return {
        // status为用户身份，0是求职者，1是招聘者
        status: localStorage.status,
        act: 0,
        accountNameCo: '',
        passwordCo: '',
        mobile: '',
        loginAccountNameCo: '',
        loginPasswordCo: ''
      };
    },
    // methods 编写js函数
    methods: {
      accountNameBlur() {
        console.log(1111111);
        if (this.accountName == '' || this.accountName == null) {
          console.log(2222222);
        }
      },
      back() {
        this.$router.go(-1); //返回上一层
      },
     //判断on的参数，进行跳转并传参
     on(n) {
       let routePath = '/companyLogin';
       let queryParameters = {
         act: n
       };
       if (n === 0) {
         routePath = '/companyLogin';
       } else if (n === 1) {
         routePath = '/companyLogin';
       }
       this.$router.push({
         path: routePath,
         query: queryParameters
       });
     },
      //公司账号密码登录账号
      loginComUser() {
        this.$http({
            method: "post",
            url: 'api/comuser/loginCom',
            params: {
              loginAccountName: this.loginAccountNameCo,
              loginPassword: this.loginPasswordCo
            }
          })
          .then(({
            data
          }) => {
            console.log("AAAA" + data.companyUser);
            localStorage.status = 1;
            localStorage.setItem("userId", data.companyUser.id);
            console.log(localStorage.getItem("userId"));
            this.$router.push("/");
          })
      },
      //注册公司账号
      registerCoAccount() {
        this.$http({
          method: "get",
          url: "api/comuser/save",
          params: {
            accountName: this.accountNameCo,
            password: this.passwordCo
          },
        }).then(({
          data
        }) => {
          if (data.code == 200) { //注册成功跳转密码登录页
            this.on(0);
          }
        })
      }
    },
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  html,
  body,
  .tac,
  .box,
  .tab-left,
  .tab-left .el-menu {
    height: 100%;
  }

  .box {
    width: 100%;
    background: #3e63a8;
  }

  .head {
    background: #3e63a8;
    color: #fff;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
  }

  .back {
    width: 14px;
    height: 14px;
  }

  .back {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 10px;
    z-index: 999;
  }

  .logo {
    width: 100%;
    height: 200px;
    box-sizing: border-box;
    display: flex;
    position: relative;
    justify-content: center;
    padding-top: 20px;
  }

  .logo .logo-bg {
    /* width: 100%; */
    height: 150px;
  }

  .content {
    position: relative;
    z-index: 999;
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    display: flex;
    flex-flow: column;
    align-items: center;
  }

  .content p {
    font-size: 14px;
    text-align: center;
    color: #fff;
    padding-top: 10px;
  }

  .head-title {
    width: 70%;
    box-sizing: border-box;
    padding: 0 10px;
    background: #fff;
    display: flex;
    align-items: center;
    height: 40px;
    margin: 10px 0;
  }

  .head-title div {
    font-size: 12px;
    /* padding-left: 10px; */
  }

  .head-title input {
    border: 0;
    width: 120px;
    outline: none;
    font-size: 12px;
  }

  ::-webkit-input-placeholder {
    font-weight: 100;
  }

  /* 使用webkit内核的浏览器 */
  :-moz-placeholder {
    font-weight: 100;
  }

  /* Firefox版本4-18 */
  ::-moz-placeholder {
    font-weight: 100;
  }

  /* Firefox版本19+ */
  :-ms-input-placeholder {
    font-weight: 100;
  }

  .head-btn {
    background: #f4cf4f;
    width: 70%;
    font-size: 14px;
    text-align: center;
    color: #3e63a8;
    height: 35px;
    line-height: 35px;
  }

  .bg {
    width: 100%;
    height: 100%;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 0;
  }

  .con-box {
    width: 100%;
  }
  .code{
    margin-left:420px;
  }

  .bottom {
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    width: 70%;
    justify-content: space-around;
    padding-top: 20px;
  }
</style>
